
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="demo">
			<h2>1. 绑定监听</h2>
			<button @click="test1">test1</button>
			<button @click="test2('atguigu')">test2</button>
			<button @click="test3">test3</button>
			<button @click="test4(123, $event)">test4</button>
			
			<h2>2. 事件修饰符</h2>
			<div style="width: 200px; height: 200px; background: pink;" @click="test5">
				<div style="width: 100px; height: 100px; background: deeppink;" @click.stop="test6"></div>
			</div>
			<a href="https://www.baidu.com/" @click.prevent="test7">去百度</a>
			
			<h2>3. 按键修饰符</h2>
			<input type="text" @keydown.enter="test8" v-model="inputval"/>
			<input type="text" @keydown.enter="test9"/>
		</div>
		
		<script type="text/javascript" src="js/vue.js"></script>
		<script>
			new Vue({
				el: "#demo",
				data: {
					inputval: "",
					test1: function(){
						alert("test1")
					},
					test2: function(msg){
						alert(msg)
					},
					test3: function(event){
						alert(event.target.innerHTML)
					},
					test3: function(event){
						alert(event.target.innerHTML)
					},
					test4: function(number){
						alert(number + "---" + event.target.innerHTML)
					},
					test5: function(){
						alert("outer")
					},
					test6: function(){
						alert("inner")
					},
					test7: function(){
						alert("test7")
					},
					test8: function(){
						alert(this.inputval)
					},
					test9: function(event){
						alert(event.target.value)
					}
				}
			})
		</script>
	</body>
</html>

